<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!-- 编辑商品 -->
<!DOCTYPE html>
<html class="x-admin-sm">

<head>
<meta charset="UTF-8">
<title>编辑商品</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="stylesheet" href="./css/font.css">
<link rel="stylesheet" href="./css/xadmin.css">
<link rel="stylesheet" href="./css/shop-add.css">
<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
</head>

<body>
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-body ">
						<form:form modelAttribute="myproducts"
							class="layui-form layui-col-space5 shop-add-form" method="POST"
							enctype="multipart/form-data"
							action="${ pageContext.request.contextPath }/admin/saveEditprod">
							<input type="hidden" name="id" value="${id}"/>
							
							<div class="shop-add-left">
								<div class="layui-input-inline layui-show-xs-block row">
									<label for="">商品名称:</label>
									<form:input type="text" name="mame" path="name"
										autocomplete="off" class="layui-input" />
									<div style="color: red; margin-left: 20px;">
										<form:errors path="name" />
									</div>
								</div>

								<div class="layui-input-inline layui-show-xs-block row">
									<label for="">商品描述:</label>
									<form:textarea type="textarea" name="description"
										path="description" autocomplete="off" class="layui-textarea"></form:textarea>
									<div style="color: red; margin-left: 20px;">
										<form:errors path="description" />
									</div>
								</div>

								<div class="layui-input-inline layui-show-xs-block row">
									<label for="">商品类别:</label>
									<form:select name="category" path="category">
										<!-- 通过循环语句将所有商品类别显示在下拉列表中 -->
										<c:forEach items="${categorys }" var="c">
											<option value="${c.id }">${c.name }</option>
										</c:forEach>
									</form:select>
								</div>

								<div class="layui-input-inline layui-show-xs-block row">
									<label for="">库存:</label>
									<form:input type="number" name="pnum" path="pnum"
										autocomplete="off" min="1" max="9999999" class="layui-input" />
									<div style="color: red; margin-left: 20px;">
										<form:errors path="pnum" />
									</div>
								</div>

								<div class="layui-input-inline layui-show-xs-block row">
									<label for="">价格:</label>
									<form:input type="number" name="price" path="price"
										autocomplete="off" min="0.01" max="9999999.99" step="0.01"
										class="layui-input" />
									<div style="color: red; margin-left: 20px;">
										<form:errors path="price" />
									</div>
								</div>

							</div>


							<div class="shop-add-right">
								<div class="row">
									<span>商品图片:</span>
									<div class="fileBox">
										<input type="file" name="imgurl" size="24" class="inputfile"
											id="pic1" onchange="changepic(this)"
											accept="image/png, image/jpeg, image/gif, image/jpg">
										<label for="pic1"> <span class="add">+</span> <span
											class="font">点击上传图片</span> <img src="${pageContext.request.contextPath }${imgurl }" alt=""
											class="show pic1">
										</label>
									</div>
									<span style="color: red; margin-top: 30px;"> ${imgError }</span>
								</div>
								<div class="shop-add-btn">
								<button class="layui-btn" type="reset">重置</button>
									<button class="layui-btn" type="submit">确定</button>
								</div>
							</div>
						</form:form>

					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script src="js/jquery.min.js"></script>
<script>
	$(function(){
		<c:if test="${!(empty msg)}">
			alert("${msg}");
		</c:if>
	});
	
	//选择合适的类别
	<c:if test="${!(empty myproducts.category)}">
	let category = $("select[name=category] option").each(function(){
		//console.log($(this).val());
		let choose = $(this).val();
		if(choose == ${myproducts.category}){
			$(this).attr("selected",true);	
		}else{
			$(this).attr("selected",false);	
		}
	});
	</c:if>


	function changepic(obj) {
		//console.log(obj.files[0]);//这里可以获取上传文件的name
		var newsrc = getObjectURL(obj.files[0]);

		let id = $(obj).attr('id');
		$('.' + id).prop('src', newsrc);
		// document.getElementById('show').src = newsrc;
	}
	//建立一個可存取到該file的url
	function getObjectURL(file) {
		var url = null;
		// 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
		if (window.createObjectURL != undefined) { // basic
			url = window.createObjectURL(file);
		} else if (window.URL != undefined) { // mozilla(firefox)
			url = window.URL.createObjectURL(file);
		} else if (window.webkitURL != undefined) { // webkit or chrome
			url = window.webkitURL.createObjectURL(file);
		}
		return url;
	}
</script>

<script>
	layui.use([ 'laydate', 'form' ], function() {
		var laydate = layui.laydate;

		//执行一个laydate实例
		laydate.render({
			elem : '#start' //指定元素
		});

		//执行一个laydate实例
		laydate.render({
			elem : '#end' //指定元素
		});
	});

	/*用户-停用*/
	function member_stop(obj, id) {
		layer.confirm('确认要停用吗？', function(index) {

			if ($(obj).attr('title') == '启用') {

				//发异步把用户状态进行更改
				$(obj).attr('title', '停用');
				$(obj).find('i').html('&#xe62f;');

				$(obj).parents("tr").find(".td-status").find('span').addClass(
						'layui-btn-disabled').html('已停用');
				layer.msg('已停用!', {
					icon : 5,
					time : 1000
				});

			} else {
				$(obj).attr('title', '启用');
				$(obj).find('i').html('&#xe601;');

				$(obj).parents("tr").find(".td-status").find('span')
						.removeClass('layui-btn-disabled').html('已启用');
				layer.msg('已启用!', {
					icon : 5,
					time : 1000
				});
			}

		});
	}

	/*用户-删除*/
	function member_del(obj, id) {
		layer.confirm('确认要删除吗？', function(index) {
			//发异步删除数据
			$(obj).parents("tr").remove();
			layer.msg('已删除!', {
				icon : 1,
				time : 1000
			});
		});
	}

	function delAll(argument) {

		var data = tableCheck.getData();

		layer.confirm('确认要删除吗？' + data, function(index) {
			//捉到所有被选中的，发异步进行删除
			layer.msg('删除成功', {
				icon : 1
			});
			$(".layui-form-checked").not('.header').parents('tr').remove();
		});
	}
	
	function close(){
		// 获得frame索引
        var index = parent.layer.getFrameIndex(window.name);
        //关闭当前frame
        parent.location.reload();
        parent.layer.close(index);
	}
	
	
</script>

</html>